<template>
 <div id="App">
    <router-view  v-if="isRouterAlive"></router-view>
  </div>
 </template>
<script>

export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  mounted () {
    window.addEventListener('unload', this.saveState)
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('userMsg')
    sessionStorage.removeItem('searchMsg')
  },
  methods: {
    saveState () {
      console.log(this.$store.state.token)
      console.log(this.$store.state.userMsg)
      sessionStorage.setItem('token', this.$store.state.token)
      sessionStorage.setItem('userMsg', JSON.stringify(this.$store.state.userMsg))
      sessionStorage.setItem('searchMsg', this.$store.state.searchMsg)
    },
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}

</script>

<style lang="less" >
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
//#App {
//  font-family: Avenir, Helvetica, Arial, sans-serif;
//  -webkit-font-smoothing: antialiased;
//  -moz-osx-font-smoothing: grayscale;
//  text-align: center;
//  color: #2c3e50;
//  height: 100%;
//}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
